<template>
  <div class="app-container">
    定制 14 天控卡食谱
    <div>
      <el-calendar :range="range" :first-day-of-week="firstDayOfWeek">
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{ date, data }">
          <component :is="'calanderDay'" :date="date" :data="data" />
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import calanderDay from './calander-day'
export default {
  name: 'Recipe',
  components: { calanderDay },
  data() {
    return {
      today: new Date(), // 今日日期
      firstDayOfWeek: 7, // 日历 - 每周第一天为周日(7)
      range: [] // 日历 - 范围。开始日期需要为周日(与 firstDayOfWeek 相关)，结束日期为周六(与 firstDayOfWeek 相关)。详见官方文档。
    }
  },
  created() {
    // 初始化页面数据
    this.initData()
  },
  methods: {
    /**
     * 初始化页面数据
     */
    initData() {
      // 初始化日历范围 - 当周
      this.range = [
        this.getLastSunDayOfWeek(this.today),
        this.getNextSaturdayOfWeek(this.today)
      ]
    },
    /**
     * 今日的上一个周日。 日历范围的开始日期
     */
    getLastSunDayOfWeek() {
      return new Date(
        this.today.getTime() - this.today.getDay() * 24 * 60 * 60 * 1000
      )
    },
    /**
     * 今日的下一个周六。 日历范围的结束日期
     */
    getNextSaturdayOfWeek() {
      return new Date(
        this.today.getTime() + (6 - this.today.getDay()) * 24 * 60 * 60 * 1000
      )
    }
  }
}
</script>

<style>
.is-selected {
  color: #1989fa;
}
</style>
